<template>
  <el-container class="index-container">
    <el-container class="s-menu">
      <div :style="{ height: fullHeigth + 'px' }">
        <div class="logo-box">
          <img :src="configInfo.image_url" alt="" />
          <span v-if="!is_collapse">{{ configInfo.name }}</span>
        </div>
        <el-aside :width="is_collapse ? '64px' : '200px'">
          <el-menu
            :default-active="'/' + href"
            :router="true"
            :collapse-transition="false"
            :collapse="is_collapse"
            :unique-opened="true"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF"
          >
            <el-submenu
              v-for="item in menuList"
              :key="item.id"
              :index="item.id + ''"
            >
              <template v-slot:title>
                <i :class="'iconfont ' + item.icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <el-submenu
                v-for="second_item in item.children"
                :key="second_item.id"
                :index="second_item.id + ''"
              >
                <template v-slot:title>
                  <i :class="'iconfont ' + second_item.icon"></i>
                  <span>{{ second_item.name }}</span>
                </template>
                <el-menu-item
                  v-for="three_item in second_item.children"
                  :key="three_item.id"
                  :index="'/' + three_item.href"
                  @click="
                    save_nav_state(
                      '/' + three_item.href,
                      [item.name, second_item.name, three_item.name],
                      three_item
                    )
                  "
                  >{{ three_item.name }}</el-menu-item
                >
              </el-submenu>
            </el-submenu>
          </el-menu>
        </el-aside>
      </div>
    </el-container>
    <div
      class="s-main-breadcrumb"
      :style="{
        width: (is_collapse ? fullWidth - 64 : fullWidth - 200) + 'px',
        left: (is_collapse ? 64 : 200) + 'px'
      }"
    >
      <div class="s-main-header">
        <div class="s-main-breadcrumb-left">
          <div class="toggle_button" @click="toggle_collapse">
            <i
              class="iconfont"
              :class="is_collapse ? 'icon-svg' : 'icon-i1oa-hamburger-fold'"
            ></i>
          </div>
          <s-breadcrumb v-if="fullWidth > 900"></s-breadcrumb>
        </div>

        <el-header class="s-header">
          <el-menu
            mode="horizontal"
            background-color="#FFFFFF"
            text-color="#606266"
            active-text-color="#606266"
          >
            <el-menu-item index="0-0">
              <s-screenfull></s-screenfull>
            </el-menu-item>
            <el-menu-item index="1-0" @click="out_cache">清除缓存</el-menu-item>
            <el-submenu index="2-0">
              <template v-slot:title>账号：{{ userName }}</template>
              <el-menu-item
                index="2-1"
                @click="edit_admin_dialog_visible = true"
                >修改密码</el-menu-item
              >
              <el-menu-item index="2-2" @click="logout">退出</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-header>
      </div>
      <s-tags-view></s-tags-view>
    </div>
    <div
      class="s-main"
      :style="{
        width: (is_collapse ? fullWidth - 64 : fullWidth - 200) + 'px',
        marginLeft: (is_collapse ? 64 : 200) + 'px',
        heigth: fullHeigth - 100 + 'px'
      }"
    >
      <el-main>
        <router-view class="router-view" v-slot="{ Component }">
          <transition :name="$store.state.config.transitionName">
            <component :is="Component" />
          </transition>
        </router-view>
        <s-footer :fullWidth="fullWidth" :isCollapse="is_collapse"></s-footer>
      </el-main>
    </div>
    <!-- 添加对话框 -->
    <el-dialog
      title="添加"
      v-model="edit_admin_dialog_visible"
      :width="percentage_width"
      @close="edit_admin_dialog_close"
    >
      <!-- 主体区 -->
      <el-form
        label-width="100px"
        :model="edit_admin_form"
        :rules="edit_admin_rules"
        ref="edit_admin_ref"
      >
        <el-form-item label="原密码" prop="y_password">
          <el-input
            type="password"
            placeholder="请输入原密码"
            maxlength="14"
            clearable
            show-word-limit
            v-model="edit_admin_form.y_password"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            maxlength="14"
            clearable
            show-word-limit
            v-model="edit_admin_form.password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password_confirmation">
          <el-input
            type="password"
            placeholder="请输入确认密码"
            maxlength="14"
            clearable
            show-word-limit
            v-model="edit_admin_form.password_confirmation"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 按钮区 -->
      <span class="dialog-footer">
        <el-button @click="edit_admin_dialog_visible = false">取 消</el-button>
        <el-button type="primary" @click="upadte_pwd_view()">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import sBreadcrumb from "@/components/s-breadcrumb/s-breadcrumb.vue";
import sScreenfull from "@/components/s-screenfull/s-screenfull.vue";
import sTagsView from "@/components/s-tags-view/s-tags-view.vue";
import sFooter from "@/components/s-footer/s-footer.vue";
export default {
  components: {
    "s-breadcrumb": sBreadcrumb,
    "s-footer": sFooter,
    "s-screenfull": sScreenfull,
    "s-tags-view": sTagsView
  },
  data() {
    var checkYpassword = (rule, value, callback) => {
      // 定义正则表达式
      const regYpassword = /^[a-zA-Z0-9]{4,14}$/;
      if (regYpassword.test(value)) {
        return callback();
      }
      callback(new Error("原密码必须4到14位的数字或字母!"));
    };
    var checkPassword = (rule, value, callback) => {
      // 定义正则表达式
      const regPassword = /^[a-zA-Z0-9]{4,14}$/;
      if (regPassword.test(value)) {
        return callback();
      }
      callback(new Error("密码必须4到14位的数字或字母!"));
    };
    var checkPasswordConfirmation = (rule, value, callback) => {
      if (value !== this.edit_admin_form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        return callback();
      }
    };
    return {
      fullWidth: document.body.clientWidth,
      fullHeigth: document.body.clientHeight,
      config_info: {},
      percentage_width: this.$config.percentage_width, // 弹框的宽度
      // 是否折叠
      is_collapse: !(document.body.clientWidth > 768),
      // 修改密码
      edit_admin_dialog_visible: false,
      edit_admin_form: {
        // 修改密码数据
        y_password: "",
        password: "",
        password_confirmation: ""
      },
      edit_admin_rules: {
        y_password: [
          { required: true, message: "请输入原密码！", trigger: "blur" },
          { validator: checkYpassword, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码！", trigger: "blur" },
          { validator: checkPassword, trigger: "blur" }
        ],
        password_confirmation: [
          { required: true, message: "请输入确认密码！", trigger: "blur" },
          { validator: checkPasswordConfirmation, trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.get_menu_list();
  },
  computed: {
    menuList() {
      return this.$store.state.menus.menuList;
    },
    userName() {
      return this.$store.state.userInfo.userName;
    },
    configInfo() {
      return this.$store.state.config.configInfo;
    },
    href() {
      return this.$store.state.menus.href;
    }
  },
  watch: {
    fullWidth(val) {
      this.fullWidth = val;
      if (this.fullWidth > 768) {
        this.is_collapse = false;
      } else {
        this.is_collapse = true;
      }
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.fullWidth = window.screenWidth;
      })();
    };
  },
  methods: {
    // 退出
    logout() {
      this.$base.request(
        {
          that: this,
          method: "DELETE",
          url: "auth/index/logout"
        },
        () => {
          localStorage.removeItem("token_type");
          localStorage.removeItem("token");
          // this.$Cookies.remove('token_type')
          // this.$Cookies.remove('token')
          this.$store.commit("menus/emptyChildrenHref");
          this.$store.commit("menus/emptyBreadcrumb");
          this.$store.commit("menus/emptyHref");
          this.$store.commit("menus/emptyMenuList");
          this.$store.commit("menus/emptyVisitedViews");
          this.$store.commit("userInfo/emptyUserName");
          window.location.reload("/login");
        }
      );
    },
    // 监听修改密码对话框的关闭事件
    edit_admin_dialog_close() {
      this.$refs.edit_admin_ref.resetFields();
    },
    // 修改密码提交
    upadte_pwd_view() {
      this.$refs.edit_admin_ref.validate(valid => {
        if (valid) {
          this.$base.request(
            {
              that: this,
              method: "PUT",
              url: "auth/index/upadte_pwd_view",
              data: this.edit_admin_form
            },
            res => {
              if (res.code === 8888) {
                this.$base.message({ that: this, message: res.msg });
                this.edit_admin_dialog_visible = false;
              }
            }
          );
        }
      });
    },
    // 获取左侧栏
    get_menu_list() {
      if (
        this.$store.state.menus.menuList.length <= 0 ||
        this.$store.state.userInfo.userName === ""
      ) {
        this.$base.request(
          {
            that: this,
            url: "auth/index/menu"
          },
          res => {
            if (res.code === 8888) {
              this.$store.commit("menus/setMenuList", res.data.menu_list);
              this.$store.commit("userInfo/setUserName", res.data.username);
            }
          }
        );
      }
      if (!this.$store.state.config.configInfo.name) {
        this.$base.request(
          {
            that: this,
            url: "auth/auth_config/config_info"
          },
          res => {
            if (res.code === 8888) {
              this.$store.commit("config/setConfigInfo", res.data);
            }
          }
        );
      }
    },
    // 控制左侧菜单的折叠与展开
    toggle_collapse() {
      this.is_collapse = !this.is_collapse;
    },
    // 点击左侧栏储存数据
    save_nav_state(href, breadcrumb, childrenHref) {
      const visitedViews = this.$store.state.menus.visitedViews;
      const data = visitedViews.filter(v => {
        return "/" + v.href === href;
      });
      if (data.length <= 0) {
        childrenHref.breadcrumb = breadcrumb;
        visitedViews.push(childrenHref);
        this.$store.commit("menus/setVisitedViews", visitedViews);
      }
    },
    // 清除缓存
    out_cache() {
      this.$base.confirm({ that: this, content: "确认要清除缓存？" }, () => {
        this.$base.request(
          {
            that: this,
            method: "DELETE",
            url: "auth/index/out_cache"
          },
          res => {
            if (res.code === 8888) {
              this.$store.commit("menus/emptyChildrenHref");
              this.$store.commit("menus/emptyBreadcrumb");
              this.$store.commit("menus/emptyHref");
              this.$store.commit("menus/emptyMenuList");
              this.$store.commit("userInfo/emptyUserName");
              this.$base.message({ that: this, message: res.msg });
              window.location.reload("/");
            }
          }
        );
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "index.scss";
</style>
